<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<text class="head_mid" v-if="select==''">偏好</text>
			<text class="head_mid" v-else>选择偏好</text>
			<!-- <text class="save" v-if="select==''" @tap="addPreference">保存</text> -->
			<text class="right-box"></text>
		</view>
		<view class="menuBox">
			<view class="body_item" v-for="(item,index) in typeList" :key="index" @tap="selectType(index,item)" :class="{active1:index===typeIndex}">
				{{item}}
			</view>
		</view>
		<view class="body">
			<view class="body" v-if="type==0">
				<view class="body_item1 flex_box" @tap="toshaixuan('交友拍拖')">
					<image v-if="jiaoyouSex!=''||jiaoyoucountryNotClear!=''||jiaoyoumax!=''||jiaoyoumin!=''||shenfenArr!=''" class="hasCheck"
					 src="../../../static/index/theselected.png" mode=""></image>
					<image v-else class="hasCheck" src="../../../static/index/uncheck.png" mode=""></image>

					<image v-if="jiaoyouSex!=''||jiaoyoucountryNotClear!=''||jiaoyoumax!=''||jiaoyoumin!=''||shenfenArr!=''" class="tubiao"
					 src="../../../static/wode/friend_true.png" mode=""></image>
					<image v-else class="tubiao" src="../../../static/wode/friend_false.png" mode=""></image>
					<text :class="{ischeck:jiaoyouSex!=''||jiaoyoucountryNotClear!=''||jiaoyoumax!=''||jiaoyoumin!=''||shenfenArr!=''}">交友拍拖>></text>

				</view>
				<view class="body_item1 flex_box" @tap="toshaixuan('语言学习')">
					<image v-if="languageNotClear!=''" class="hasCheck" src="../../../static/index/theselected.png" mode=""></image>
					<image v-else class="hasCheck" src="../../../static/index/uncheck.png" mode=""></image>

					<image v-if="languageNotClear!=''" class="tubiao" src="../../../static/wode/language_true.png" mode=""></image>
					<image v-else class="tubiao" src="../../../static/wode/language_false.png" mode=""></image>
					<text :class="{ischeck:languageNotClear!=''}">语言学习 >></text>
				</view>
				<view class="body_item1 flex_box" @tap="toshaixuan('境外旅游')">
					<image v-if="luyoucountryNotClear!=''" class="hasCheck" src="../../../static/index/theselected.png" mode=""></image>
					<image v-else class="hasCheck" src="../../../static/index/uncheck.png" mode=""></image>

					<image v-if="luyoucountryNotClear!=''" class="tubiao" src="../../../static/wode/world_true.png" mode=""></image>
					<image v-else class="tubiao" src="../../../static/wode/world_false.png" mode=""></image>
					<text :class="{ischeck:luyoucountryNotClear!=''}">境外旅游 >></text>
				</view>
				<view class="body_item1 flex_box" @tap="toshaixuan('商业互助')">
					<image v-if="shangyecountryNotClear!=''||shangyeArr!=''" class="hasCheck" src="../../../static/index/theselected.png"
					 mode=""></image>
					<image v-else class="hasCheck" src="../../../static/index/uncheck.png" mode=""></image>

					<image v-if="shangyecountryNotClear!=''||shangyeArr!=''" class="tubiao" src="../../../static/wode/company_true.png"
					 mode=""></image>
					<image v-else class="tubiao" src="../../../static/wode/company_false.png" mode=""></image>
					<text :class="{ischeck:shangyecountryNotClear!=''||shangyeArr!=''}">商业互助 >></text>
				</view>
			</view>
			<view class="body2" v-else-if="type==1">
				<view class="haoqi_item" v-for="(item,index) in hobbyList2" :key="index" @tap="select1(index,item)" :class="{active:item.select===true}">
					{{item.text}}
				</view>
			</view>

		</view>
		<image class="shejiao" v-if="type==0" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.Se3Hq1KxqzUb7bc178782dcbc27cec742f10e17c84a5.png" mode=""></image>
		<image class="haoqi" v-else-if="type==1" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.lMf82SkkGVZjc5cb971065116cc2935ff875eeab24dc.png" mode=""></image>
		<view class="btn" v-if="select!=''" @tap="addPreference">
			完成
		</view>
		<view class="btn" v-else @tap="addPreference">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: ['交友', '内容'],
				hobbyList1: [{
					text: '交友拍拖',
					select: false,
					itemobj: {},
				}, {
					text: '语言学习',
					select: false,
					itemobj: {},
				}, {
					text: '境外旅游',
					select: false,
					itemobj: {},
				}, {
					text: '商业互助',
					select: false,
					itemobj: {},
				}],
				hobbyList2: [{
					text: '搞笑',
					select: false
				}, {
					text: '风景',
					select: false
				}, {
					text: '美食',
					select: false
				}, {
					text: '习俗',
					select: false
				}, {
					text: '教育',
					select: false
				}, {
					text: '其它',
					select: false
				}],
				active: false,
				type: '',
				select: '', //判断是不是从注册进入的
				typeIndex: 0,
				itemIndex: '',
				user_id: "",
				backType: '',
				like_category: "",
				selectMenu: "交友", //选择的
				user_Info: "", //登录用户信息
				preference: '',
				shangyecountryNotClear: [],
				shangyeArr: '',
				jiaoyoucountryNotClear: [],
				shenfenArr: [],
				jiaoyoumax: [],
				jiaoyoumin: [],
				jiaoyouSex: [],
				luyoucountryNotClear: [],
				languageNotClear: [],
				haoqi: [], //选择的好奇
				yule: false,
			};
		},
		onLoad(option) {
			if (option.select != undefined) {
				this.select = option.select;
			} else {
				this.getPreferenceData() //获取已设置的偏好详情
			}
			this.user_id = option.user_id;
			uni.setStorageSync('user_id',this.user_id)
			this.backType = option.type;
			console.log(option);
		},
		onShow() { //显示
			this.like_category = '交友';


			this.getUserInfo()
			this.getPreference()
			this.getStorage() //获取重新设置的偏好
		},
		methods: {
			getStorage() {
				console.log(1)
				// 				if(uni.getStorageSync('jiaoyouSex')!=''){
				// 					this.jiaoyouSex=uni.getStorageSync('jiaoyouSex')
				// 				}
				// 				if(uni.getStorageSync('jiaoyoucountryNotClear')!=''){
				// 					this.jiaoyoucountryNotClear=uni.getStorageSync('jiaoyoucountryNotClear')
				// 				}
				// 				if(uni.getStorageSync('jiaoyoumax')!=''){
				// 					this.jiaoyoumax=uni.getStorageSync('jiaoyoumax')
				// 				}
				// 				if(uni.getStorageSync('jiaoyoumin')!=''){
				// 					this.jiaoyoumin=uni.getStorageSync('jiaoyoumin')
				// 				}
				// 				if(uni.getStorageSync('shenfenArr')!=''){
				// 					this.shenfenArr=uni.getStorageSync('shenfenArr')
				// 				}
				// 				if(uni.getStorageSync('languageNotClear')!=''){
				// 					this.languageNotClear=uni.getStorageSync('languageNotClear')
				// 				}
				// 				if(uni.getStorageSync('luyoucountryNotClear')!=''){
				// 					this.luyoucountryNotClear=uni.getStorageSync('luyoucountryNotClear')
				// 				}
				// 				if(uni.getStorageSync('shangyecountryNotClear')!=''){
				// 					this.shangyecountryNotClear=uni.getStorageSync('shangyecountryNotClear')
				// 				}
				// 				if(uni.getStorageSync('shangyeArr')!=''){
				// 					this.shangyeArr=uni.getStorageSync('shangyeArr')
				// 				}

					this.jiaoyouSex = uni.getStorageSync('jiaoyouSex')
				

					this.jiaoyoucountryNotClear = uni.getStorageSync('jiaoyoucountryNotClear')
					console.log(this.jiaoyoucountryNotClear)

					this.jiaoyoumax = uni.getStorageSync('jiaoyoumax')

					this.jiaoyoumin = uni.getStorageSync('jiaoyoumin')

					this.shenfenArr = uni.getStorageSync('shenfenArr')

					this.languageNotClear = uni.getStorageSync('languageNotClear')

					this.luyoucountryNotClear = uni.getStorageSync('luyoucountryNotClear')

					this.shangyecountryNotClear = uni.getStorageSync('shangyecountryNotClear')

					this.shangyeArr = uni.getStorageSync('shangyeArr')
				

			},
			getPreferenceData() {
				var me = this
				var data = {
					user_id: uni.getStorageSync('user_id'),
					status: 1
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userPreference',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res, '偏好详情')
						if (res.data.data != null && res.data.data.length != 0) {
							var data = res.data.data;
							if (data[0].type == '好奇') {
								var isselect = data[0].preference;
								for (var j = 0; j < me.hobbyList2.length; j++) {
									if (me.hobbyList2[j].text == isselect) {
										me.hobbyList2[j].select = true
										console.log(me.hobbyList2)
									}
								}
							} else if (data.type == '偏好') {
								for (var i = 0; i < data.length; i++) {
									if (data[i].preference == '交友拍拖') {
										me.jiaoyoucountryNotClear = data[i].country.split(',')
										me.jiaoyoumax = data[i].start_age
										me.jiaoyoumin = data[i].end_age
										me.jiaoyouSex = data[i].sex
										me.shenfenArr = data[i].overseas_identity_name.split(',')
									} else if (data[i].preference == '语言学习') {
										// yuyan.country = this.languageNotClear.join(',');
										me.languageNotClear = data[i].languages.split(',')
									} else if (data[i].preference == '境外旅游') {
										me.luyoucountryNotClear = data[i].country.split(',')
									} else if (data[i].preference == '商业互助') {
										me.shangyecountryNotClear = data[i].country.split(',')
										me.shangyeArr = data[i].business_type.split(',')
									}
								}
							}

						}
					}
				})
			},
			selectType(index, item) {
				this.typeIndex = index;
				this.itemIndex = -1; //重置
				this.selectMenu = '';
				if (this.typeIndex == 0) {
					this.type = 0;
				} else if (this.typeIndex == 1) {
					this.type = 1;
				}
				this.like_category = item
			},
			select1(index, item) {
				this.itemIndex = index;
				this.selectMenu = item;
				if (this.typeIndex == 0) {
					if (this.hobbyList1[index].select == false) {
						this.hobbyList1[index].select = true
					} else {
						this.hobbyList1[index].select = false
					}
				} else {
					if (this.hobbyList2[index].select == false) {
						this.hobbyList2[index].select = true
					} else {
						this.hobbyList2[index].select = false
					}
					this.haoqi = [];
					for (var i = 0; i < this.hobbyList2.length; i++) {
						if (this.hobbyList2[i].select == true) {
							this.haoqi.push(this.hobbyList2[i].text)
						}
					}
					var temp = []; //一个新的临时数组
					for (var i = 0; i < this.haoqi.length; i++) { //去重
						if (temp.indexOf(this.haoqi[i]) == -1) {
							temp.push(this.haoqi[i]);
						}
					}
					this.haoqi = temp;
					console.log(this.haoqi)
				}
			},
			toshaixuan(type) {
				if (type == '交友拍拖' || type == '商业互助') {
					uni.navigateTo({
						url: '/pages/Other/shaixuan/shaixuan?type=' + type
					})
				} else if (type == '境外旅游' || type == '语言学习') {
					uni.navigateTo({
						url: '/pages/Other/countrySelect/countrySelect?type=' + type
					})
				}


			},
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			getUserInfo() {
				var me = this;
				var data = {
					id: uni.getStorageSync('user_id')
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'findById',
					data: data,
					successBack: function(res) {
						console.log(res, '用户信息')
					}
				})
			},
			getPreference() {
				if (this.preference != '') {
					for (var i = 0; i < this.hobbyList1.length; i++) {
						if (this.preference == this.hobbyList1[i]) {
							this.typeIndex = 0;
							this.type = 0;
							this.itemIndex = i;
							return
						}
					}
					for (var j = 0; j < this.hobbyList2.length; j++) {
						if (this.preference == this.hobbyList2[j]) {
							this.typeIndex = 1;
							this.type = 1;
							this.itemIndex = j;
							return
						}

					}
				}
			},
			addPreference() {
				// 				if (this.selectMenu == '') {
				// 					uni.showToast({
				// 						title: '您还没有选择偏好',
				// 						icon: 'none'
				// 					})
				// 					return false
				// 				}

				var entityList = [];

				var me = this;
				if (this.type == 0) {


					if (this.jiaoyoucountryNotClear != '' || this.shenfenArr != [] || this.jiaoyouSex != '' || this.jiaoyoumax != '' ||
						this.jiaoyoumin != '') {
						var jiaoyou = {};
						if (this.jiaoyoucountryNotClear != '') {
							jiaoyou.country = this.jiaoyoucountryNotClear.join(',');
						}
						if (this.jiaoyouSex == '男') {
							this.jiaoyouSex = 1
						} else if (this.jiaoyouSex == '女') {
							this.jiaoyouSex = 2
						} else {
							this.jiaoyouSex = ''
						}
						if (this.shenfenArr != []) {
							jiaoyou.overseas_identity_name = this.shenfenArr.join(',');
						}
						jiaoyou.sex = this.jiaoyouSex;
						jiaoyou.end_age = this.jiaoyoumax;
						jiaoyou.start_age = this.jiaoyoumin;

						jiaoyou.preference = '交友拍拖';
						jiaoyou.type = '社交';
						jiaoyou.user_id = uni.getStorageSync('user_id');
						entityList.push(jiaoyou)

					}

					if (this.luyoucountryNotClear != []) {
						var lvyou = {};
						lvyou.country = this.luyoucountryNotClear.join(',');
						lvyou.preference = '境外旅游';
						lvyou.type = '社交';
						lvyou.user_id = uni.getStorageSync('user_id');
						entityList.push(lvyou)
					}



					if (this.languageNotClear != []) {
						var yuyan = {};
						yuyan.languages = this.languageNotClear.join(',');
						yuyan.preference = '语言学习';
						yuyan.type = '社交';
						yuyan.user_id = uni.getStorageSync('user_id');
						entityList.push(yuyan)
					}



					if (this.shangyecountryNotClear != [] || this.shangyeArr != '') {
						var shangye = {};
						if (this.shangyecountryNotClear != []) {
							shangye.country = this.shangyecountryNotClear.join(',');
						}
						if (this.shangyeArr != '') {
							shangye.business_type = this.shangyeArr.join(',');
						}

						shangye.preference = '商业互助';
						shangye.type = '社交';
						shangye.user_id = uni.getStorageSync('user_id');
						entityList.push(shangye)
					}



					entityList = JSON.stringify(entityList)
					console.log(entityList)

				} else if (this.type == 1) {
					var haoqiobj = {};
					if (this.haoqi != []) {
						haoqiobj.preference = this.haoqi.join(',');
					} else {
						uni.showToast({
							title: '请至少选择一项',
							icon: 'none'
						})
					}

					haoqiobj.type = '好奇';
					haoqiobj.user_id = uni.getStorageSync('user_id');
					entityList.push(haoqiobj)
					entityList = JSON.stringify(entityList)
					console.log(entityList, '1')
				}
				var data = {
					entityList: entityList
				};
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userPreference',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res, '传偏好');
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) {
							if (me.select != '' && me.select == 'zhuce') {
								uni.navigateTo({
									url: '../../../pages/Other/tuijianfriend/tuijianfriend'
								})
							} else {
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
							}

						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					},
				})
			},

		}
	}
</script>

<style scoped>
	.head {
		height: 162upx;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
	}

	.head image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
		padding-top: 70upx;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
		padding-top: 90upx;
	}

	.save {
		padding-top: 68upx;
	}
	.right-box{
		width: 90upx;
	}

	.title {
		color: #999999;
		font-size: 28upx;
		padding: 20upx 24upx 10upx 24upx;
	}

	.body {
		display: flex;
		padding-bottom: 32upx;
		flex-wrap: wrap;
	}

	.body2 {
		background: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20upx;
		padding-bottom: 30upx;
	}

	.menuBox {
		background: #FFFFFF;
		height: 88upx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20upx;
	}

	.haoqi_item {
		height: 58upx;
		width: 140upx;
		font-size: 26upx;
		text-align: center;
		line-height: 58upx;
		margin: 32upx 24upx 0upx 18upx;
		border-radius: 58upx;
		border: 1upx solid #e6e6e6;
	}

	.body_item {
		font-size: 34upx;
		color: #999999;
		margin: 0 125upx;
	}

	.body_item1 {
		background: #FFFFFF;
		width: 355upx;
		height: 183upx;
		border: 1upx solid #E6E6E6;
		border-radius: 10upx;
		position: relative;
		/* line-height: 183upx; */
		text-align: center;
		color: #666666;
		font-size: 28upx;
		margin-left: 12upx;
		margin-top: 12upx;
	}

	.hasCheck {
		width: 34upx;
		height: 34upx;
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	.flex_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tubiao {
		width: 75upx;
		height: 75upx;
	}

	.text_box {
		display: flex;
		align-items: center;
	}

	.shejiao {
		position: absolute;
		bottom: 210upx;
		left: 40upx;
		width: 235upx;
		height: 235upx;
	}

	.haoqi {
		position: absolute;
		bottom: 300upx;
		right: 40upx;
		width: 235upx;
		height: 235upx;
	}

	.text_title {
		font-size: 28upx;
	}

	.text2 {
		line-height: 65upx;
		display: flex;
		flex-direction: column;
		color: #46CECF;
	}

	.xinxi {
		line-height: 30upx;
		display: flex;
		flex-direction: column;
		color: #46CECF;
		font-size: 20upx;
	}

	.active {
		height: 58upx;
		width: 140upx;
		font-size: 26upx;
		text-align: center;
		line-height: 58upx;
		margin: 32upx 24upx 0upx 18upx;
		border-radius: 58upx;
		color: #46CECF;
		border: 1upx solid #46CECF;
	}

	.active1 {
		color: #46CECF;
	}

	.btn {
		position: absolute;
		bottom: 105upx;
		left: 24upx;
	}

	.text1 {
		display: flex;
		padding-left: 20upx;
		flex-wrap: wrap;
	}

	.ischeck {
		color: #47CECF;
	}
</style>
